<template>
	<view class="p-[30rpx]">
		<view class="item">
			<up-image :src="banner" width="136rpx" height="136rpx" radius="8rpx"></up-image>
			<view class="ml-[24rpx] flex-1">
				<view class="line-clamp-1 text-[30rpx]">百香果气泡饮</view>
				<view class="text-[24rpx] text-[#666]">规格:10份装</view>
				<view class="flex items-center mt-[30rpx]">
					<view class="tag" v-for="item in 3" :key="item">赠品</view>
				</view>
			</view>
			<view class="text-right">
				<view class="text-[#FF4D1B] text-[36rpx] font-bold">￥5.99</view>
				<view class="text-[28rpx]">×1</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import banner from '@/static/banner.png';
</script>

<style lang="scss" scoped>
.item {
	@apply flex items-center justify-between mb-[20rpx] last:mb-0;
}
.tag {
	@apply px-[10rpx] py-[2rpx] bg-[rgba(195,154,113,0.1)] rounded-[4rpx] text-second text-[20rpx] mr-[8rpx] last:mr-0;
}
</style>
